<template>
  <div class="Map-tab">
    <!-- <Conduct></Conduct> -->
    <div class="tab-content">
      <div v-show="cur == 0">
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/车间火情.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
      <div v-show="cur == 1">
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/车间疏散.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
      <div v-show="cur == 2">
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/办公楼疏散.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
    </div>
    <div class="tab-title">
      <div class="sm-box" @click="cur = 0" :class="cur == 0 ? 'height' : ''">
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/车间火情.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
      <div
        class="sm-box sm-box2"
        @click="cur = 1"
        :class="cur == 1 ? 'height' : ''"
      >
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/车间疏散.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
      <div class="sm-box" @click="cur = 2" :class="cur == 2 ? 'height' : ''">
        <video autoplay="autoplay" controls="controls" loop="loop" muted="true">
          <source src="../../../assets/video/办公楼疏散.mp4" type="video/mp4" />
          你的浏览器不支持视频播放
        </video>
      </div>
    </div>
  </div>
</template>

<script>
import Conduct from "../../charts/Conduct";
export default {
  components: {
    Conduct,
  },
  data() {
    return {
      cur: 0,
    };
  },
};
</script>

<style lang="scss" scoped>
.Map-tab {
  width: 913px;
  height: 513px;
  position: relative;
}
.tab-content {
  width: 100%;
  height: 100%;
}
.tab-title {
  position: absolute;
  z-index: 15;
  top: 413px;
  left: 159px;
  display: flex;
  flex-direction: row;
  font-size: 20px;
  color: bisque;
  video {
    width: 179px;
    height: 100px;
  }
  video::-webkit-media-controls {
    display: none !important;
  }
}
.sm-box {
  align-content: space-around;
  width: 179px;
  height: 100px;
  background-color: #fff;
  opacity: 0.4;
}
.height {
  opacity: 1;
  border: 1px solid #fff;
}
.sm-box2 {
  margin: 0 19px;
}
video {
  width: 913px;
  height: 513px;
}
video::-webkit-media-controls {
  display: none !important;
}
</style>
